<template>
  <div class="editable-table">
    <el-table
      ref="editTable"
      :data="list"
      row-key="id"
      style="width: 100%"
      :max-height="600"
      :height="height"
      :min-height="height"
    >
      <template v-for="column of columns">
        <el-table-column
          v-if="column.slot"
          :key="column.key"
          :prop="column.key"
          show-overflow-tooltip
          :label="column.label"
          :width="column.width || 'auto'"
          :min-width="(column.label || '').length * 16 + 30"
          :align="column.align || 'left'"
        >
          <template slot-scope="scope">
            <slot :name="column.key" :row="scope.row" :index="scope.$index" :column="column"></slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="column.key"
          :prop="column.key"
          :label="column.label"
          :width="column.width || 'auto'"
          :min-width="200"
          :align="column.align || 'left'"
          :class-name="column.readonly ? 'readonly-column':'common-column' "
        >
          <template slot="header">
            <div style="padding-left: 12px">
              <span v-if="!!column.required" style="color:#FD5E5E">*</span>
              {{ column.label }}
            </div>
          </template>
          <template slot-scope="scope">
            <div style="display: inline-block">
              <zk-item-pool v-if="!column.readonly" v-model="scope.row[column.key]" :option="{...column,disabled: disabled}" />
              <div v-else :class="label-item">{{ dictionaryValue(scope.row[column.key], column) }}
              </div>
            </div>
          </template>
        </el-table-column>
      </template>
      <el-table-column v-if="!disabled" align="right" :width="controlWidth" fixed="right">
        <template slot="header">
          <el-button
            size="mini"
            type="success"
            icon="el-icon-plus"
            class="table-control-btn"
            circle
            @click="newRow()"
          ></el-button>
        </template>
        <template slot-scope="scope">
          <slot name="control" :row="scope.row"></slot>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-minus"
            class="table-control-btn"
            circle
            plain
            @click="del(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import ZkItemPool from '@/components/zk-item-pool'
  import { mapGetters } from 'vuex'

  export default {
    name: 'EditTable',
    components: { ZkItemPool },
    props: {
      columns: {
        type: Array,
        required: true,
        default: () => []
      },
      list: {
        type: Array,
        default: () => []
      },
      height: {
        type: null,
        default: null,
      },
      controlWidth: {
        type: String,
        default: '140px'
      },
      onChange: {
        type: Function,
        default: new Function(),
      },
      disabled: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        addRow: {},
      }
    },
    computed: {
      ...mapGetters(['dictionaries']),
    },
    methods: {
      dictionaryValue(value, option = {}) {
        const { storeKey } = option
        const options = option.options || this.dictionaries[storeKey] || []
        return (options.find(e => e.key == value) || {}).value || value
      },
      newRow() {
        this.addRow = { id: Math.round((1 + Math.random()) * 1000000) }
        this.list.push(this.addRow)
      },
      async del(row) {
        this.list.splice(this.list.findIndex(e => e === row), 1)
      },
    }
  }
</script>
<style scoped lang="scss">
  .editable-table {
    /*padding-bottom: 10px;*/
    overflow: hidden;

    .label-item {
      display: inline-block;
      min-width: 190px;
      background: rgba(232, 232, 232, .18);
      line-height: 32px;
      min-height: 32px;
      padding-left: 16px;
      cursor: pointer;
      border-radius: 4px;
    }

    .table-control-btn {
      margin: 0 5px;
    }

    /deep/ .readonly-column {
      background: #f8f8f8;
    }
  }
</style>
